//入口文件
import Vue from 'vue'


//导入路由的包
import VueRouter from 'vue-router'
//安装路由
Vue.use(VueRouter);

//引入MUI样式
import './lib/mui/css/mui.min.css'
import './lib/mui/css/icons-extra.css'



//引入mint-ui样式
import 'mint-ui/lib/style.css'


//按需导入mint 各种组件
// import {Header, Swipe, SwipeItem, Button} from 'mint-ui'
// Vue.component(Header.name, Header);
// Vue.component(Swipe.name, Swipe);
// Vue.component(SwipeItem.name, SwipeItem);
// Vue.component(Button.name, Button);
import MintUI from "mint-ui"
Vue.use(MintUI)

//导入vue-resource
import VueResource from 'vue-resource'
//安装vue-resource
Vue.use(VueResource);
//设置请求根域名
Vue.http.options.root = 'http://www.liulongbin.top:3005';
//设置post请求格式
Vue.http.options.emulateJSON = true;


//导入缩略图模块
import VuePreview from 'vue-preview'
Vue.use(VuePreview)


//导入时间格式化模块
import moment from 'moment'
//时间过滤器
Vue.filter('dateFormat', function (dataStr, pattern = 'YYYY-MM-DD HH:mm:SS') {
  return moment(dataStr).format(pattern)
})
//导入vuex
import Vuex from 'vuex'
//安装vuex
Vue.use(Vuex)


//先从localstorage 中拿数据进行渲染
var car = JSON.parse(localStorage.getItem('car') || '[]')
const store = new Vuex.Store({
  state: {
    car: car//这是加入购物车里的所有商品信息 格式为{id:商品id, count:商品数量, price:商品价格}
  },
  mutations: { //注意：这里判断ID相不相等 要用 == 不要用 === 否则会有bug 要么就把所有的 id 全部 parseInt 一下(待验证)
    addToCar(state, goodsinfo) {
      //定义一个商品标识符 判断是否为新添加的商品
      var GoodsFlag = false
      //循环遍历购物车中的商品信息 如果id 相同就就让count相加
      state.car.some(item => {
        if (item.id == goodsinfo.id) {
          item.count += goodsinfo.count
          GoodsFlag = true
          return
        }
      })
      if (GoodsFlag == false) {//如果进入到这里 说明是一个新的商品信息
        state.car.push(goodsinfo)
      }
      //存储到本地locationtorage中
      localStorage.setItem('car', JSON.stringify(state.car))
    },
    updataGoodsCount(state, goodsinfo) {//根据ID更新 更新商品数量
      state.car.some(item => {
        if (item.id == goodsinfo.id) {
          item.count = parseInt(goodsinfo.count)
          return true
        }
      })
      localStorage.setItem('car', JSON.stringify(state.car))
    },
    removeGoodsInfo(state, id) {//根据ID 删除 localstorage 中的数据
      state.car.some((item, i) => {
        if (item.id == id) {
          state.car.splice(i, 1)
          return true
        }
      })
      localStorage.setItem('car', JSON.stringify(state.car))
    },
    updataGoodsSelected(state, info) {//更新商品选中状态
      state.car.forEach((item) => {
        if (item.id == info.id) {
          item.selected = info.selected
        }
      })
      localStorage.setItem('car', JSON.stringify(state.car))
    }
  },
  getters: {
    getAllCount(state) {//获取所有商品的数量加入购物车 购物车的徽标跟着变化 传递购买的所有商品数量
      var c = 0
      state.car.forEach(item => {
        c += item.count
      })
      return c
    },
    getGoodsCount(state) {//传递出一个对象 o{ id: count }
      var o = {}
      state.car.forEach(item => {
        o[item.id] = item.count
      })
      return o
    },
    getGoodsSelected(state) { //根据id 判断是否选中 传递出一个对象 o{ id: selected}
      var o = {};
      state.car.forEach(item => {
        o[item.id] = item.selected
      })
      return o
    },
    getGoodsCountAndAmount(state) {//传递 商品总数量 和商品总价
      var o = {
        count: 0,
        amount: 0
      };
      state.car.forEach(item => {
        o.count += item.count
        o.amount += item.count * item.price
      })
      return o

    }

  }
})






//导入 app 组件
import app from './App.vue'
//导入处理路由的模块
import router from './router.js'

var vm = new Vue({
  el: '#app',
  //把App组件渲染到 index.html 中去
  render: c => c(app),
  //挂载路由
  router,
  store
});

